<!--
 * @Date: 2022-11-24 11:39:03
 * @LastEditTime: 2022-12-10 10:25:44
 * @Description: content
-->
<template>
  <view class="page-wrap">
    <uni-nav-bar
      title="地址管理"
      color="#333"
      leftIcon="left"
      backgroundColor="#F0DBB0;"
      :border="false"
      :statusBar="true"
      :fixed="true"
    >
      <template v-slot:left>
        <view @click="$common.back()">
          <image
            src="/static/images/back.png"
            style="width: 32rpx; height: 32rpx"
            mode="scaleToFill"
          />
        </view>
      </template>
    </uni-nav-bar>

    <view class="address">
      <view
        @click="chooseAdd(item)"
        v-for="(item, i) of listData"
        :key="i"
        class="address-item"
      >
        <view class="address-content">
          <!-- Location Row -->
          <view class="address-info">
            <view class="location-row">
              <view class="location-icon">
                <image
                  src="/static/images/location.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="location-text">{{ item.address }}</view>
            </view>

            <!-- Contact Row -->
            <view class="contact-row">
              <view class="contact-icon">
                <image src="/static/images/user.png" mode="scaleToFill" />
              </view>
              <view class="contact-name">{{ item.name }}</view>

              <view class="contact-mobile">
                {{ item.mobile }}
                <text v-if="item.status == 1" class="default-tag">默认</text>
              </view>
            </view>
          </view>

          <view @click.stop="toSet(item)" class="edit-icon">
            <image src="/static/images/edit.png" mode="scaleToFill" />
          </view>
        </view>

        <!-- Bottom Divider -->
        <view v-if="isManageMode" class="divider"></view>

        <!-- Action Row - Only visible in management mode -->
        <view v-if="isManageMode" class="action-row">
          <view @click.stop="setDef(item)" class="default-btn">
            <view class="checkbox" :class="{ active: item.status == 1 }">
              <image
                v-if="item.status == 1"
                src="/static/images/hg_xz.png"
                mode="scaleToFill"
              />
              <image
                v-else
                src="/static/images/hg_quanx.png"
                mode="scaleToFill"
              />
            </view>
            <text>默认收货地址</text>
          </view>

          <view class="action-btns">
            <view @click.stop="copyAddress(item)" class="copy-btn">
              <image src="/static/images/copy.png" mode="scaleToFill" />
              <text>复制</text>
            </view>
            <view @click.stop="openModel(item)" class="delete-btn">
              <image src="/static/images/delete.png" mode="scaleToFill" />
              <text>删除</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-bar">
      <view v-if="isManageMode" @click="toggleManageMode" class="exit-btn">
        退出管理
      </view>
      <view v-else @click="toggleManageMode" class="manage-btn">管理</view>
      <view @click="toSet()" class="add-btn">
        <image src="/static/images/add_adress.png" mode="scaleToFill" />
      </view>
    </view>

    <u-modal
      v-model="showModel"
      :title="'提示'"
      :content="'请确认是否删除'"
      :show-cancel-button="true"
      @confirm="delAddress"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      optionsData: "",
      showModel: false,
      delForm: {
        id: "",
      },
      listData: [],
      isManageMode: false,
    };
  },

  onLoad(options) {
    this.optionsData = options;
  },

  onShow() {
    this.getList();
  },

  methods: {
    /**
     * @description: 切换管理模式
     * @return {*}
     */
    toggleManageMode() {
      this.isManageMode = !this.isManageMode;
    },

    /**
     * @description: 选择地址
     * @return {*}
     */
    chooseAdd(item) {
      if (this.isManageMode) {
        return;
      }

      if (this.optionsData.type == "choose") {
        uni.$emit("chooseAdd", {
          data: item,
        });
        this.$common.back();
      }
    },

    /**
     * @description: 复制地址
     * @param {*} item
     * @return {*}
     */
    copyAddress(item) {
      uni.setClipboardData({
        data: item.address,
        success: () => {
          this.$common.toast({
            title: "地址复制成功",
            icon: "success",
            duration: 1500,
          });
        },
      });
    },

    /**
     * @description: 打开模态框
     * @param {*} e
     * @return {*}
     */
    openModel(item) {
      this.delForm.id = item.id;
      this.showModel = true;
    },

    /**
     * @description: 删除地址
     * @param {*}
     * @return {*}
     */
    delAddress() {
      this.req({
        url: "/v1/address/del",
        data: this.delForm,
        success: (res) => {
          console.log(res);
          if (res.code == 200) {
            this.$common.toast({
              title: res.msg,
              icon: "success",
              duration: 600,
              success: () => {
                this.getList();
              },
            });
          }
        },
      });
    },

    /**
     * @description: 设置默认地址
     * @return {*}
     */
    setDef(item) {
      if (item.status == 1) {
        return;
      }

      this.req({
        url: "/v1/address/default",
        data: {
          id: item.id,
        },
        success: (res) => {
          if (res.code == 200) {
            this.getList();
          }
        },
      });
    },

    /**
     * @description: 获取列表
     * @return {*}
     */
    getList() {
      this.req({
        url: "/v1/address/list",
        data: {},
        Loading: true,
        success: (res) => {
          if (res.code == 200) {
            this.listData = res.data;
          }
        },
      });
    },

    /**
     * @description: 新增/修改地址
     * @return {*}
     */
    toSet(item) {
      this.$common.to({
        type: 1,
        url: "/package/mine/address-set",
        query: {
          id: (item && item.id) || "",
        },
      });
    },
  },
};
</script>

<style lang="scss">
.page-wrap {
  padding-bottom: 140rpx;
  background-color: #f0dbb0;
  min-height: 100vh;

  .address {
    padding: 20rpx 0;

    &-item {
      margin-bottom: 30rpx;
      background-color: #fff2d8;
      padding: 20rpx 0;
      border-radius: 12rpx;
    }
  }

  .address-content {
    display: flex;
    align-items: center;
  }

  .address-info {
    flex: 1;
  }

  .edit-icon {
    width: 32rpx;
    height: 32rpx;
    flex-shrink: 0;
    margin-right: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .location-row {
    display: flex;
    align-items: center;
    padding: 20rpx 40rpx 10rpx;

    .location-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 15rpx;
      flex-shrink: 0;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .location-text {
      flex: 1;
      line-height: 1.4;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }
  }

  .contact-row {
    display: flex;
    align-items: center;
    padding: 10rpx 40rpx 20rpx;

    .contact-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 15rpx;
      flex-shrink: 0;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .contact-name {
      font-size: 28rpx;
      margin-right: 20rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
    }

    .contact-mobile {
      font-size: 28rpx;
      flex: 1;
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
    }

    .default-tag {
      border: 5rpx solid #f5b43e;
      color: #f5b43e;
      border-radius: 4rpx;
      padding: 0rpx 12rpx;
      margin-left: 10rpx;
      flex-shrink: 0;

      text {
        font-weight: 400;
        font-size: 22rpx;
        color: #ea9100;
      }
    }
  }

  .divider {
    height: 1px;
    background-color: #e9dfc7;
    margin: 0 40rpx;
  }

  .action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 40rpx;

    .default-btn {
      display: flex;
      align-items: center;

      .checkbox {
        width: 36rpx;
        height: 36rpx;
        margin-right: 15rpx;
        flex-shrink: 0;
        position: relative;

        &.active {
          background-color: #f5b43e;
          border-radius: 50%;
        }

        image {
          width: 100%;
          height: 100%;
          position: relative;
          z-index: 1;
        }
      }

      text {
        font-size: 26rpx;
        color: #333;
      }
    }

    .action-btns {
      display: flex;
      align-items: center;

      .copy-btn,
      .delete-btn {
        display: flex;
        align-items: center;

        image {
          width: 28rpx;
          height: 28rpx;
          margin-right: 10rpx;
          flex-shrink: 0;
        }

        text {
          font-weight: 400;
          font-size: 24rpx;
          color: #000000;
        }
      }

      .copy-btn {
        margin-right: 30rpx;
      }
    }
  }

  .bottom-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    padding: 20rpx 30rpx;
    background-color: #f0dbb0;
    box-sizing: border-box;

    .exit-btn,
    .manage-btn {
      flex: 1;
      height: 90rpx;
      border: 5rpx solid #000;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #333;
      margin-right: 20rpx;
      font-weight: 500;
    }

    .add-btn {
      flex: 2.5;
      height: 90rpx;
      border-radius: 10rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
